{include file="public/header" /}
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <!-- Panel Other -->
    <div class="ibox float-e-margins">
        <div class="ibox-title">
            <h5>会员列表</h5>
        </div>
        <div class="ibox-content">
            <!--搜索框开始-->
            <div class="row">
                <div class="col-sm-12">
                    <div class="col-sm-2" style="width: 100px">
                        <div class="input-group">
                            <a href="{:url('add_member')}">
                                <button class="btn btn-outline btn-primary" type="button">添加会员</button>
                            </a>
                        </div>
                    </div>
                    <form class="layui-form" action="">
                        <div class="col-sm-3">
                            <div class="input-group">
                                <input type="text" id="key" class="form-control" name="key" value=""
                                       placeholder="输入需查询的会员账号/姓名/手机号" style="width: 250px;"/>
                                <span class="input-group-btn"> 
                                    <button type="button" class="btn btn-primary" lay-submit lay-filter="search">
                                        <i class="fa fa-search"></i> 搜索
                                    </button>
                                </span>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <!--搜索框结束-->
            <div class="example-wrap">
                <div class="example">
                    <table class="layui-table"
                           lay-data="{height:'full-210',url:'index',method:'post',page:true,id:'member',limit:20}"
                           lay-filter="member">
                        <thead>
                        <tr>
                            <th lay-data="{field:'id',fixed:true,title:'ID1',align:'center',sort:true,width:60}"></th>
                            <th lay-data="{field:'account',title:'账号',width:150}"></th>
                            <th lay-data="{field:'nickname',title:'昵称',width:200}"></th>
                            <th lay-data="{field:'sex',templet:'#sex',title:'性别',width:60,align:'center'}"></th>
                            <th lay-data="{title:'头像',templet:'#head_img',width:60,align:'center'}"></th>
                            <th lay-data="{field:'mobile',title:'手机号码',align:'center',width:150}"></th>
                            <th lay-data="{field:'group_name',templet:'#group_name',title:'会员等级',align:'center',width:150}"></th>
                            <!--<th lay-data="{field:'status',templet:'#status',title:'激活状态',align:'center',width:100,sort:true}"></th>-->
                            <th lay-data="{field:'closed_name',templet:'#closed',title:'状态',align:'center',width:120,sort:true}"></th>
                            <th lay-data="{field:'integral',title:'交易余额',align:'center',width:120,sort:true}"></th>
                            <th lay-data="{field:'money',title:'可用余额',align:'center',width:120,sort:true}"></th>
                            <!--<th lay-data="{field:'login_num',title:'登录次数',align:'center',width:100,sort:true}"></th>-->
                            <th lay-data="{field:'create_time',title:'注册时间',align:'center',width:180,sort:true}"></th>
                            <th lay-data="{toolbar:'#toolbar',title:'操作',align:'center',width:120,fixed:'right'}"></th>
                        </tr>
                        </thead>
                    </table>
                    <script type="text/html" id="head_img">
                        <img src="{{d.head_img}}" alt="" style="height: 28px;border-radius: 50%">
                    </script>
                    <script type="text/html" id="toolbar">
                        <div class="layui-btn-group">
                            <button class="layui-btn layui-btn-xs" style="margin: 0;" lay-event="inc">加余额</button>
                            <button class="layui-btn layui-btn-xs layui-btn-danger" style="margin: 0;" lay-event="dec">
                                减余额
                            </button>
                            <button class="layui-btn layui-btn-xs" style="margin: 0;" lay-event="binding_shop">
                               绑定商户
                            </button>
                        </div>
                    </script>
                    <script type="text/html" id="sex">
                        {{# if(d.sex==1){ }}
                        <font color="#1E88E5">男</font>
                        {{# }else if(d.sex==2){ }}
                        <font color="#ff1493">女</font>
                        {{# }else{ }}
                        保密
                        {{# } }}


                    </script>
                    <script type="text/html" id="status">
                        {{# if(d.status==1){ }}
                        <font color="#1AB394">已激活</font>
                        {{# }else{ }}
                        未激活
                        {{# } }}
                    </script>
                    <script type="text/html" id="closed">
                        <!-- 这里的 checked 的状态只是演示 -->
                        <input type="checkbox" name="closed" value="{{d.id}}"  lay-skin="switch" lay-text="正常|锁定" lay-filter="closed"
                               {{d.closed==0?'checked':''}}>
                    </script>
                    <script type="text/html" id="group_name">
                        {{# if(d.group_id==1){ }}
                        {{d.group_name}}
                        {{# }else{ }}
                        <font color="#1AB394">{{d.group_name}}</font>
                        {{# } }}
                    </script>
                </div>
            </div>
            <!-- End Example Pagination -->
        </div>
    </div>
</div>
<!-- End Panel Other -->
</div>

<!-- 加载动画 -->
<div class="spiner-example">
    <div class="sk-spinner sk-spinner-three-bounce">
        <div class="sk-bounce1"></div>
        <div class="sk-bounce2"></div>
        <div class="sk-bounce3"></div>
    </div>
</div>

{include file="public/footer" /}
<style>
    #inc {
        padding: 20px 20px 0;
    }
</style>
<div id="inc" style="display: none">
    <form class="layui-form layui-form-pane">
        <div class="layui-form-item">
            <label class="layui-form-label">余额类型</label>
            <div class="layui-input-block">
                <select id="type" lay-ignore class="layui-input">
                    <option value="">--- 请选择 ---</option>
                    <option value="integral">交易余额</option>
                    <option value="money">可用余额</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">金额</label>
            <div class="layui-input-block">
                <input type="number" id="integral"
                       placeholder="请输入积分数" min="0"
                       step="1000" autocomplete="off" class="layui-input">
            </div>
        </div>
    </form>
</div>
<div id="binding_shop" style="display: none">
    <form class="layui-form layui-form-pane">
        <div class="layui-form-item">
            <label class="layui-form-label">绑定商户</label>
            <div class="layui-input-block">
                <select id="shop_id" lay-ignore class="layui-input">
                    {foreach $shop_list as $v}
                    <option value="{$v['id']}">{$v['shop_name']}</option>
                    {/foreach}

                </select>
            </div>
        </div>
    </form>
</div>
<script type="text/javascript">
    var table = layui.table, form = layui.form;
    $(".spiner-example").css('display', 'none'); //数据加载完关闭动画
    /**
     * 监听锁定操作
     */
    form.on('switch(closed)', function (obj) {
        $.post("{:url('member_status')}", {id: this.value}, function (result) {
            /*
            if (result.data === 0) {
                layer.tips('解除锁定', obj.othis, {tips: 4});
            } else {
                layer.tips('已锁定', obj.othis, {tips: 4});
            }
            */
        });
    });
    /**
     * 监听工具条
     */
    table.on('tool(member)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
        var data = obj.data; //获得当前行数据
        var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
        if (data.status === 0) {
            layer.msg('账号未激活、不能操作！', {time: 1500});
            return false;
        }
        if (layEvent === 'inc') { // 加积分
            money('inc', obj, data);
        } else if (layEvent === 'dec') { // 减积分
            money('dec', obj, data);
        }else if(layEvent == 'binding_shop'){
            binding_shop();
        }
    });
    //绑定商户
    function binding_shop(){
        layer.open({
            type: 1,
            area: ['400px', '250px'],
            shade: [0.3, '#000'],
            btn: ['确定', '取消'],
            title: false, //不显示标题
            closeBtn: false,
            content: $('#binding_shop'), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
            yes: function (index) {
                layer.close(index);
                var load = layer.load(2, {shade: [0.3, '#fff']});
                $.post("{:url('binding_shop')}", {
                    shop_id: $('#shop_id').val(),
                }, function (result) {

                    layer.close(load);
                    if (result.code === 200) {
                        obj.update(result.data);
                    }
                    layer.msg(result.msg, {time: 1500});
                });
            },
            end: function () {
            }
        });

    }

    /**
     * 排序
     */
    table.on('sort(member)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
        table.reload('member', {
            initSort: obj,
            where: {
                field: obj.field, //排序字段
                order: obj.type //排序方式
            }
        });
    });

    /**
     * search
     */
    form.on('submit(search)', function (result) {
        var data = result.field;
        table.reload('member', {
            where: {
                key: data.key
            }
        });
        return false;
    });

    /**
     * 加减余额
     * @param mt
     * @param obj
     * @param data
     */
    function money(mt, obj, data) {
        var title = '加余额';
        if (mt === 'dec') {
            title = '减余额';
        }
        layer.open({
            type: 1,
            title: title,
            area: ['400px', '250px'],
            shade: [0.3, '#000'],
            btn: ['确定', '取消'],
            closeBtn: false,
            content: $('#inc'),
            yes: function (index) {
                var type = $('#type').val(), integral = $('#integral').val();
                if (!type) {
                    layer.msg('请选择金额类型！', {time: 1500});
                    return false;
                }
                if (!integral) {
                    layer.msg('请输入金额！', {time: 1500});
                    return false;
                } else if (!(/^[1-9]{1}[0-9]{0,}$/).test(integral)) {
                    layer.msg('金额必须是大于0的整数', {time: 1500});
                    return false;
                }
                layer.close(index);
                var load = layer.load(2, {shade: [0.3, '#fff']});
                $.post("{:url('recharge')}", {
                    integral_type: type,
                    integral: integral,
                    account: data.account,
                    type: mt
                }, function (result) {
                    layer.close(load);
                    if (result.code === 200) {
                        obj.update(result.data);
                    }
                    layer.msg(result.msg, {time: 1500});
                });
            },
            end: function () {
                $('#type').val('');
                $('#integral').val('');
                $('#inc').hide();
            }
        })
    }

</script>
</body>
</html>